import React from 'react';
function ShoppingItemDetail(props){
    return (
      <label>
        Introduction:
        <textarea 
            value={props.value} 
            name="introduction"
            onChange={props.onChange}
        />
      </label>
    );
}
function ShoppingItemTitle(props){
    return (
      <label>
         Title:
         <input 
            type="text" 
            value={props.value} 
            name="title"
            onChange={props.onChange}
        />
      </label>
    )
}
export default class ShoppingForm extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            'title': '',
            'introduction': ''
        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
    }
    debug_logging(){
        console.log('a new item is submitted: ');
        console.log('title: ' + this.state.title);
        console.log('introduction: ' + this.state.introduction);
    }
    handleSubmit(event){
        this.debug_logging();
        event.preventDefault();
        return false;
    }
    handleInputChange(event){
        const target = event.target;
        const value = target.value;
        const name = target.name;
        this.setState({
            [name]: value
        })
    }
    render(){
        return (
            <form onSubmit = {this.handleSubmit}>
            <ShoppingItemTitle value={this.state.title} onChange={this.handleInputChange} />
            <ShoppingItemDetail value={this.state.introduction} onChange={this.handleInputChange} />
            <input type="submit" value="Submit" />
            </form>
        )
    }
}